<template>
  <div>
    <div class="search">
      <el-input placeholder="请输入标题查询" style="width: 200px" v-model="title"></el-input>
      <el-button type="info" plain style="margin-left: 10px" @click="load(1)">查询</el-button>
      <el-button type="warning" plain style="margin-left: 10px" @click="reset">重置</el-button>
    </div>

    <!--    <div class="operation">
          <el-button type="primary" plain @click="handleAdd">新增</el-button>
          <el-button type="danger" plain @click="delBatch">批量删除</el-button>
        </div>-->

    <div class="table">
      <el-table :data="tableData" stripe  @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="id" label="档案编号" width="100" align="center" sortable></el-table-column>
        <el-table-column prop="employeeName" label="姓名"  width="250" show-overflow-tooltip></el-table-column>
        <el-table-column prop="process" label="审批进度" show-overflow-tooltip></el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
        <el-table-column prop="note" label="说明"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template v-slot="scope" >
            <el-button plain type="primary" plain @click = "handleEdit(scope.row)">审批</el-button>
            <el-button plain type="primary" plain @click = "loadEmployeeData(scope.row.employeeId)">编辑</el-button>
                  </template>
                </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10, 20]"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total">
        </el-pagination>
      </div>
    </div>

        <el-dialog title="信息" :visible.sync="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
          <el-form label-width="100px" style="padding-right: 50px" :model="form" :rules="rules" ref="formRef">
            <el-form-item label="请审核" prop="employeeName">
              <el-select v-model="status" placeholder="请选择">
                <el-option label="审核通过" value="审核通过"></el-option>
                <el-option label="审核不通过" value="审核不通过"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="note" label="说明">
              <el-input  v-model="form.note" autocomplete="off" placeholder = "请输入审批说明"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="fromVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </div>
        </el-dialog>

<!--          员工信息的展示列表   -->
    <el-dialog title="管理员" :visible.sync="fromEmployeeVisible" width="80%" :close-on-click-modal="false" destroy-on-close>
      <el-form :model="formEmployee" label-width="100px" style="padding-right: 50px" :rules="rules" ref="formRef">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formEmployee.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="formEmployee.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="formEmployee.phone" placeholder="电话"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formEmployee.email" placeholder="邮箱"></el-input>
        </el-form-item>
        <!--这是做一个下拉框，管理员可以设置他们的身份，这里的身份要和后台的对应一致，就是刚刚再LevelEnum中列举出来的身份-->
        <el-form-item label="身份" prop="level">
          <el-select v-model="formEmployee.level" placeholder="请选择">
            <el-option label="员工" value="员工"></el-option>
            <el-option label="人事专员" value="人事专员"></el-option>
            <el-option label="人事经理" value="人事经理"></el-option>
            <el-option label="薪酬专员" value="薪酬专员"></el-option>
            <el-option label="薪酬经理" value="薪酬经理"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="LevelOneName" label="一级机构" >
          <el-select v-model="formEmployee.levelOneName" placeholder="请选择一级机构" :disabled="isEditing" >
            <el-option v-for="item in departmentData " :label="item.name" :value="item.id "  :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="LevelTwoName" label="二级机构" >
          <el-select v-model="formEmployee.levelTwoName" placeholder="请选择二级机构" :disabled="isEditing" >
            <el-option v-for="item in levelTwo " :label="item.name" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="LevelOneName" label="三级机构" >
          <el-select v-model="formEmployee.levelThreeName" placeholder="请选择三级机构" @change=" handleLevelThreeChange(form.levelThreeId)" :disabled="isEditing" >
            <el-option v-for="item in levelThree " :label="item.name" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="positionTypeName" label="职位类型" >
          <el-select v-model="formEmployee.positionTypeName" placeholder="请选择职位类型" @change="loadPositions" :disabled="isEditing">
            <el-option v-for="item in  positionTypeNameData " :label="item.name" :value="item.id " :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="positionId" label="职位名称">
          <el-select v-model="formEmployee.positionName" placeholder="请选择职位名称"  :disabled="isEditing">
            <el-option v-for="item in  positionNameData " :label="item.name" :value="item.id " :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="头像">
          <el-upload
              class="avatar-uploader"
              :action="$baseUrl + '/files/upload'"
              :headers="{ token: user.token }"
              list-type="picture"
              :on-success="handleAvatarSuccess"
          >
            <el-button type="primary">上传头像</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="formEmployee.gender" placeholder="请选择">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="qq" prop="qq">
          <el-input v-model="formEmployee.qq" placeholder="qq"></el-input>
        </el-form-item>
        <el-form-item label="住址" prop="address">
          <el-input v-model="formEmployee.address" placeholder="住址"></el-input>
        </el-form-item>
        <el-form-item label="邮编" prop="postcode">
          <el-input v-model="formEmployee.postcode" placeholder="邮政编码"></el-input>
        </el-form-item>
        <el-form-item label="国籍" prop="nationality">
          <el-input v-model="formEmployee.nationality" placeholder="国籍"></el-input>
        </el-form-item>
        <el-form-item label="出生地" prop="birthplace">
          <el-input v-model="formEmployee.birthplace" placeholder="出生地"></el-input>
        </el-form-item>
        <el-form-item label="出生日期" prop="birthday">
          <el-input v-model="formEmployee.birthday" placeholder="出生日期"></el-input>
        </el-form-item>
        <el-form-item label="民族" prop="people">
          <el-select v-model="formEmployee.people" placeholder="请选择">
            <el-option label="汉族" value="汉族"></el-option>
            <el-option label="少数民族" value="少数民族"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="宗教信仰" prop="faith">
          <el-input v-model="formEmployee.faith" placeholder="宗教信仰"></el-input>
        </el-form-item>
        <el-form-item label="政治面貌" prop="status">
          <el-input v-model="formEmployee.status" placeholder="政治面貌"></el-input>
        </el-form-item>
        <el-form-item label="身份证号码" prop="ino">
          <el-input v-model="formEmployee.ino" placeholder="身份证号码"></el-input>
        </el-form-item>
        <el-form-item label="社会保障号码" prop="ssc">
          <el-input v-model="formEmployee.ssc" placeholder="社会保障号码"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="formEmployee.age" placeholder="年龄"></el-input>
        </el-form-item>
        <el-form-item label="学历" prop="education">
          <el-select v-model="formEmployee.education" placeholder="请选择">
            <el-option label="大专" value="大专"></el-option>
            <el-option label="本科" value="本科"></el-option>
            <el-option label="研究生" value="研究生"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学历专业" prop="speciality">
          <el-input v-model="formEmployee.speciality" placeholder="专业"></el-input>
        </el-form-item>
        <el-form-item label="薪酬标准" prop="salary">
          <el-input v-model="formEmployee.salary" placeholder="薪酬标准"></el-input>
        </el-form-item>
        <el-form-item label="开户行" prop="bank">
          <el-input v-model="formEmployee.bank" placeholder="开户行"></el-input>
        </el-form-item>
        <el-form-item label="账号" prop="account">
          <el-input v-model="formEmployee.account" placeholder="账户"></el-input>
        </el-form-item>
        <el-form-item label="特长" prop="talent">
          <el-input v-model="formEmployee.talent" placeholder="特长"></el-input>
        </el-form-item>
        <el-form-item label="爱好" prop="hobby">
          <el-input v-model="formEmployee.hobby" placeholder="爱好"></el-input>
        </el-form-item>
        <el-form-item label="个人履历" prop="resume">
          <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入个人履历"
              v-model="formEmployee.resume">
          </el-input>
        </el-form-item>
        <el-form-item label="家庭关系" prop="family">
          <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入家庭关系"
              v-model="formEmployee.family">
          </el-input>
        </el-form-item>
        <el-form-item label="备注" prop="notion">
          <el-input
              type="textarea"
              :rows="4"
              placeholder="备注"
              v-model="formEmployee.notion">
          </el-input>
        </el-form-item>


      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="fromEmployeeVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEmployee">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "Notice",
  data() {
    return {
      tableData: [],  // 所有的数据
      pageNum: 1,   // 当前的页码
      pageSize: 10,  // 每页显示的个数
      total: 0,
      title: null,
      fromVisible: false,
      fromEmployeeVisible:false,
      form: {},
      formEmployee:{},
      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
      rules: {
        status:[
          {required:true, message:'请选择审批结果',trigger:'blur'},
        ]
      },
      ids: [],
      archiveRecord:[],
      status:null,
      EmployeeData:[],
      employeeId:null,
    }
  },
  created() {
    this.load(1)
    this.loadArchive()
    // this.loadEmployeeData()
  },
  methods: {
    handleAdd() {   // 新增数据
      this.form = {}  // 新增数据的时候清空数据
      this.fromVisible = true   // 打开弹窗
    },
    handleEdit(row) {   // 编辑数据
      this.form = JSON.parse(JSON.stringify(row))  // 给form对象赋值  注意要深拷贝数据
      this.fromVisible = true   // 打开弹窗
    },
    /*调取档案信息的方法*/
    loadArchive(){
      this.$request.get('/Archive/selectAll').then(res => {
        if (res.code === '200') {
          console.log(res)
          this.archiveRecord= res.data
          console.log("*****************************************")
          console.log( this.archiveRecord)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    /*档案表关联查询员工表，将对应员工的具体信息查出来*/
    loadEmployeeData(id){
      console.log(id)
      this.$request.get('/employee/selectById/'+ id).then(res=>{
        if (res.code === '200'){
          // this.$message.success('操作成功')
          console.log(res)
          this.formEmployee = res.data
          this.isEditing = true;
          this.fromEmployeeVisible = true
        }else {
          this.$message.error(res.msg)
        }
      })
    },
    save() {
      // 保存按钮触发的逻辑  它会触发新增或者更新
      this.form.status = this.status
      this.$request.put('/Archive/update',this.form).then(res=>{
       if (res.code === '200'){
         this.$message.success('操作成功')
         this.load(1)
         this.fromVisible = false
         this.status = null
       }else {
         this.$message.error(res.msg)
       }
      })
    },
    saveEmployee(){
        // 5. 验证表单数据
        this.$refs.formRef.validate(valid => {
          // 6. 如果表单不合法，直接返回
          if (!valid) {
            return;
          }
          // 7. 执行保存操作（新增或更新）
          this.$request({
            url: this.formEmployee.id ? '/employee/update' : '/employee/add',
            method: this.formEmployee.id ? 'PUT' : 'POST',
            data: this.formEmployee
          }).then(saveRes => {
            // 8. 判断保存操作结果
            if (saveRes.code === '200') {
              this.$message.success('保存成功');
              this.load(1); // 重新加载数据
              this.fromEmployeeVisible = false; // 关闭表单
            } else {
              this.$message.error(saveRes.msg);
            }
          }).catch(() => {
            // 9. 捕获保存请求失败的错误
            this.$message.error('保存操作失败，请稍后再试');
            console.error('Request failed:', error.response ? error.response.data : error);
            this.$message.error('查询部门信息失败，请稍后再试');
          });
        });
    },
    del(id) {   // 单个删除
      this.$confirm('您确定删除吗？', '确认删除', {type: "warning"}).then(response => {
        this.$request.delete('/notice/delete/' + id).then(res => {
          if (res.code === '200') {   // 表示操作成功
            this.$message.success('操作成功')
            this.load(1)
          } else {
            this.$message.error(res.msg)  // 弹出错误的信息
          }
        })
      }).catch(() => {
      })
    },
    handleSelectionChange(rows) {   // 当前选中的所有的行数据
      this.ids = rows.map(v => v.id)   //  [1,2]
    },
    delBatch() {   // 批量删除
      if (!this.ids.length) {
        this.$message.warning('请选择数据')
        return
      }
      this.$confirm('您确定批量删除这些数据吗？', '确认删除', {type: "warning"}).then(response => {
        this.$request.delete('/notice/delete/batch', {data: this.ids}).then(res => {
          if (res.code === '200') {   // 表示操作成功
            this.$message.success('操作成功')
            this.load(1)
          } else {
            this.$message.error(res.msg)  // 弹出错误的信息
          }
        })
      }).catch(() => {
      })
    },
    load(pageNum) {  // 分页查询
      if (pageNum) this.pageNum = pageNum
      this.$request.get('/Archive/selectPage2', {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          title: this.title,
        }
      }).then(res => {
        this.tableData = res.data?.list
        this.total = res.data?.total
        console.log("----------------------------------------------")
        console.log(res)
      })
    },
    reset() {
      this.title = null
      this.load(1)
    },
    handleCurrentChange(pageNum) {
      this.load(pageNum)
    },
  }
}
</script>

<style scoped>

</style>
